<template>
  <div class="result">
    <div class="g-main">
      <div class="result-content">
        <div v-for="(item, index) of bigContent" :key="index + '111'">
          <div
            class="rc-title"
            v-if="item.react"
            v-html="formatting(equationDetail)"
          ></div>
          <div class="rc-react" v-if="item.react" >
            反应速率单位: 1级: s<span class="small">-1</span>; 2级: cm<span
              class="small"
              >3</span
            >/molecule s; 3级: cm<span class="small">6</span>/molecule
            <span class="small">2</span> s
          </div>
          <div class="table" v-if="item.react" >
            <el-table
              :data="item.tableData"
              style="width: 100%"
              border
              :header-cell-style="{ background: '#eef1f6', color: 'black' }"
            >
              <template v-for="(a, i) in item.tableDataHeader">
                <el-table-column
                  align="center"
                  :prop="a.prop"
                  :label="a.label"
                  :key="i"
                ></el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { formattingVoc } from "@/api/formatVoc";
export default {
  name: "resultView",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          a: "22",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          a: "22",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          a: "22",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          a: "22",
        },
      ],
      bigContent: [
        {
          equationDetail: "CgH1111+·OH=·CgHs+HO",
          // 参数=催化反应 return true 和 参数=大气化学反应返回false来控制reacet
          react: false,
          // 表头
          tableDataHeader: [
            {
              prop: "temprature",
              label: "温度(K)",
            },
            {
              prop: "actiEnergy",
              label: "活化能(KJ/mol)",
            },
            {
              prop: "actiRate",
              label: "反应速率",
            },
            {
              prop: "actiLevel",
              label: "反应级数",
            },
            {
              prop: "atmosLife",
              label: "大气寿命(s)",
            },
            {
              prop: "refText",
              label: "参考文献",
            },
          ],
          // 数据
          tableData: [
            {
              temprature: "2016-05-02",
              actiEnergy: "王小虎",
              actiRate: "上海市普陀区金沙江路 1518 弄",
              actiLevel: "22",
              atmosLife: 11,
              refText: "ssaas",
            },
          ],
        },
        {
          equationDetail: "CgH1111+·OH=·CgHs+HO",
          react: false,
          // 表头
          tableDataHeader: [
            {
              prop: "catalyzer",
              label: "催化剂",
            },
            {
              prop: "temprature",
              label: "温度(K)",
            },
            {
              prop: "actiHeat",
              label: "反应热(eV)",
            },
            {
              prop: "actiEnergy",
              label: "反应活化能(eV)",
            },
            {
              prop: "refText",
              label: "参考文献",
            },
          ],
          // 数据
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
              a: "22",
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
              a: "22",
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              a: "22",
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 ",
              a: "22",
            },
          ],
        },
      ],
      arry: [],
      react: "",
      equationDetail: "CgH1111+·OH=·CgHs+HO",
      radio: "",
    };
  },
  mounted() {
    this.equationId = this.$route.query.equationId;
    // console.log(this.equationId);
    this.equationDetail = this.$route.query.equationDetail;
    this.radio = this.$route.query.radio;
    if(this.radio==='大气化学反应'){
      this.bigContent[0].react = true
      this.bigContent[0].title = this.equationDetail
      axios.get('http://localhost:9999/vocs/reactionatmos/' + this.equationId).then((res)=>{
        this.bigContent[0].tableData = res.data.data
      })
    }else{
      this.bigContent[1].react = true
      this.bigContent[1].title = this.equationDetail
      axios.get('http://localhost:9999/vocs/reactioncatalytic/' + this.equationId).then((res)=>{
        this.bigContent[1].tableData = res.data.data
      })
    }
    
  },
  methods: {
    formatting(str) {
      return formattingVoc(str);
    },
  },
};
</script>

<style scoped lang="scss">
.result {
  // margin: 0 auto;
  .result-content {
    margin-left: 0px;
    width: 1600px;
  }
  .result-title {
    text-align: left;
  }
  .rc-title {
    margin-top: 20px;
    margin-bottom: 25px;
    margin-left: 10px;
    font-size: large;
    font-weight: 900;
    color: blue;
    text-align: left;
  }
  .table {
    margin-top: 10px;
  }
  .small {
    // text-align: left;
    font-size: 10px;
    vertical-align: super;
  }
  .rc-react {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    margin-left: 10px;
    text-align: left;
  }
}
</style>
